<template lang="html">
  <div>
    <div class="bt">
        <el-button type="primary" @click="back">返回上一级</el-button>
    </div>
    <div class="table">
        <h3 class="title">详情</h3>
        <div class="tab-item" v-for="(item,key,index) in tabData" :key="key" v-show="list[key]">
          <div class="tab-name">{{list[key]}}</div>
          <div>
            <a v-if="key == 'nagativePicture'" :href="item" target="_blank" class="im">
                <span v-if="item == '暂无图片'">{{item}}</span>
                <img v-if="item != '暂无图片'" :src="item" alt="" class="img_cla">
            </a>
            <a v-if="key == 'positivePicture'" :href="item" target="_blank"  class="im">
                <span v-if="item == '暂无图片'">{{item}}</span>
                <img :src="item" alt="" class="img_cla">
            </a>
            <a v-if="key == 'handerPositivePicture'" :href="item" target="_blank"  class="im">
                <span v-if="item == '暂无图片'">{{item}}</span>
                <img :src="item" alt=""class="img_cla">
            </a>
             <span v-if="key !== 'nagativePicture' && key !== 'positivePicture' && key !== 'handerPositivePicture'" class="tab-val">{{item}}</span>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import Data from './index.js'
export default {
  data () {
    return JSON.parse(JSON.stringify(Data))
  },
  created () {
          var obj=JSON.parse(this.$route.query.item)
          obj.passTime=this.switchTime(obj.passTime)
          // console.log(obj)
          this.tabData = this.sortObj(obj)
  },
  methods : {
    back () {
      this.$router.push({
        name : 'realApprove'
      })  
    },
    sortObj (obj) {
        var newobj = {};
        for (var i in obj) {
          if (i == 'nagativePicture' || i == 'positivePicture' || i == 'handerPositivePicture') {
              newobj[i] = obj[i];
              delete obj[i]
          }
        };
        return Object.assign(obj,newobj)
    }
  }
}
</script>

<style scoped>
  .bt {
    margin: 20px 0;
  }
  #OrderDetails{
      width:100%;
      height: 100%;
  }
  .title{
      width: 100%;
      text-align: center;
  }
  .goback{
      margin-top: 15px;
  }
  .table{
      width:800px;
      border: 1px solid #ccc;
      background-color: #fff;
      margin-top: 20px;

  }
  /* .tab-item:last-child{
      border-bottom: 1px solid #ccc;
  } */
  .tab-val{
      display: flex;
      flex-wrap: wrap;
      padding-left: 20px;
      border-left: 1px solid #ccc;
      box-sizing: border-box;
        min-height: 60px;
      align-items: center;
      padding-top:10px;

  }
  .tab-item{
      width: 100%;
      display: flex;
      padding:0 10px;
      box-sizing: border-box;
       border-top: 1px solid #ccc;
      min-height: 60px;
      align-items: center;
  }
  .tab-item .tab-name{
      min-width: 120px;
      min-height: 60px;

      display: flex;
      align-items: center;
  }
  .img_cla {
    width: 200px;
    height: 200px;
    margin: 10px 0;
    margin-left: 5px;
    cursor: pointer;
  }
  .list {
    display: flex;
  }
  .st {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #ccc;
    min-height: 60px;
    line-height: 60px;
    text-indent: 10px;
    font-size: 16px;
  }
  .ti {
    border-right: 1px solid #ccc;
    min-width: 130px;
  }
.info {
  width: 100%;
  min-height: 60px;
  /* line-height: 60px; */
  text-indent: 10px;
  font-size: 16px;
  margin-left: 10px;
}
.im {
  /* margin-left: 10px; */
}
</style>
